<template>
<div class="navbar">
  <div class="icon">
    <el-icon :size="20" @click="fnFlag">
      <Fold v-if="flag"/>
      <Expand v-else/>
    </el-icon>
  </div>
    <el-breadcrumb class="breadContainer" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item class="item" v-for="(item,index) in arrRoute" :key="index">{{item}}</el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  <div class="drop">
    <el-dropdown>
      <span class="el-dropdown-link">
        {{name}}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="fnLoginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
    </el-dropdown>
  </div>
</div>
</template>

<script setup>
import {onMounted, watch, ref, computed} from "vue";
import {useRoute} from 'vue-router'
import {useStore} from "vuex";

const emit = defineEmits(['changeMenu'])
const arrRoute = ref([])
const flag = ref(true)

let route = useRoute()
let store = useStore()

let name = computed(() =>{
  return localStorage.getItem("username")
})

const initRoute = () =>{
  arrRoute.value = []
  let matched = route.matched;
  if(matched.length > 0){
    for(let i = 0; i < matched.length; i++){
      arrRoute.value.push(matched[i]['meta']['title'])
    }
  }
}

onMounted(() =>{
  initRoute()
})

watch(() => route.path,() => {
  initRoute()
})

const fnFlag = () =>{
  flag.value = !flag.value
  emit('changeMenu', flag.value)
}

const fnLoginout = () =>{
  // 退出逻辑
}

defineExpose({
  arrRoute
})


</script>
<style scoped>
</style>

<style scoped>
.navbar{
  height: 50px;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.icon{
  padding: 0 15px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.breadContainer{
  transition: background .3s;
  -webkit-tap-highlight-color:transparent;
  height: 50px;
  display: flex;
  align-items: center;
}
.breadContainer:hover {
  background: rgba(0, 0, 0, .025)
}
.drop{
  position: absolute;
  right: 40px;
  top: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #606266;
  height: 50px;
  display: flex;
  align-items: center;
}
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
<style>
.el-main{
  box-sizing: border-box;
}
</style>